<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-link style="width: 6%;" @click="goshow()"> 返回商家管理</el-link>
			<div style="width: 100%;"><p style="text-align: center;">{{data.a}}</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"/>
		<div style="width: 100%;">
			
		</div>
		<el-card >
			<div style="display: flex;">
			<div style="margin-top: 10rem;margin-left: 25rem;">
				<el-image v-if="data.user.uid!=0" style="width: 10rem;height: 10rem;"
					:src="$ip+`/public/shows/`+data.user.pic" />
			</div>
			<div>
		<el-main>
			<h2 style="text-align: center;">{{data.a}}</h2>
			<div style="margin-left: 15rem;">
		
		<el-form :model="data.user" :rules="rules" ref="formRef">
			<el-form-item v-if="uid!=0" label="编号:" prop="account">
			      <el-input v-model="data.user.uid" placeholder="编号" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
			    </el-form-item>
		<el-form-item label="账号:" prop="account">
		      <el-input v-model="data.user.account" placeholder="账号" :prefix-icon="Cellphone" style="width: 16rem;"/>
		    </el-form-item>
			<el-form-item label="手机号:" prop="phone">
			      <el-input v-model="data.user.phone" placeholder="手机号" :prefix-icon="Cellphone" style="width: 15rem;"/>
			    </el-form-item>
				<el-form-item label="密码:" prop="password">
				      <el-input v-model="data.user.password" placeholder="密码" :prefix-icon="Cellphone" style="width: 16rem;"/>
				    </el-form-item>
				<el-form-item label="昵称:" prop="uname">
				      <el-input v-model="data.user.uname" placeholder="昵称" :prefix-icon="Cellphone" style="width: 16rem;"/>
				    </el-form-item>
					<el-form-item label="地址:" prop="address">
					      <el-input
					          v-model="data.user.address"
					          style="width: 16rem;"
					          :rows="3"
					          type="textarea"
					          placeholder="收货地址"
					      	:prefix-icon="UserFilled"
					        />
					     
					    </el-form-item>
						
					<el-form-item label="头像:" prop="pic" style="width: 30rem;">
						<el-upload class="avatar-uploader" :auto-upload="false" list-type="picture" :show-file-list="true"
							 :limit="1" :on-change="onChangeFile" :on-remove="onRemoveFile">
							<img v-if="imgUrl" :src="imgUrl" class="avatar" style="width: 53%;height: 53%;" />
								<el-icon v-else class="avatar-uploader-icon" >
									<h4 style="text-align: center;">点击上传头像</h4>
								</el-icon>
						</el-upload>
						
					</el-form-item>
			<el-button  @click="add()" style="background-color: #E1337F;  margin-left: 6rem;color: #FFFFFF;">{{data.a}}</el-button>
			  </el-form>
		
		</div>
		
		</el-main>
		</div>
		</div>
		</el-card>
		</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../../router/index.js"
		import store from "../../../store/index.js"
		import {Search,ShoppingCart,Plus,Delete,Loading,EditPen,User,Cellphone} from '@element-plus/icons-vue'
		import bottom from "../../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../../store/alert.js'
		const route =useRoute()
		const imgUrl = ref(''); //定义单个响应式变量
		const fd = new FormData();
		const data = reactive({
			a:"添加商家",
			user:{uid:0,account:"",phone:"",password:"",uname:"",permid:2,address:""}
		})
		
		function goshow(){
			
			router.push("/adm/mershow")
		}
		
		function onChangeFile(file, fileList) {
			console.log("onChangeFile....")
			console.log(fileList) //打印出数组
			const maxSize = 500 * 1024; // 500kb
			if (file.size > maxSize) {
			  errors('文件大小不能超过 500kb');
			  return;
			}
			if (fileList.length > 0) {
				console.log(fileList[0]);
				// fileList[0].raw;  就是文件内容
				imgUrl.value = URL.createObjectURL(fileList[0].raw)
				// fd.append("img", fileList[0].raw)
				console.log(fileList[0].raw)
				fd.append("img", fileList[0].raw)
			}
		}
		function onRemoveFile(file, fileList) {
			imgUrl.value=""
			
			
			}
		function add(){
			if(data.user.account==""){
				errors("账号不允许为空")
				return
			}
			if(data.user.phone.length!=11){
				errors(data.user.phone.length)
				errors("手机号不正确")
				return
			}
			if(data.user.uname==""){
				errors("昵称不允许为空")
				return
			}
			if(data.user.address==""){
				errors("收货地址不允许为空")
				return
			}
			if(data.user.password==""){
				errors("密码不正确")
				return
			}
			fd.append("uname",data.user.uname)
			fd.append("phone",data.user.phone)
			fd.append("account",data.user.account)
			fd.append("password",data.user.password)
			fd.append("address",data.user.address)
			fd.append("permid",2)
			
			let s="/public/enroll"
			if(data.user.uid!=0)s="/adm/update"
			$postf(s,fd).then((read)=>{
				if(read.data.code==401){
					errors(read.data.msg)
					return
				}
				success(read.data.msg)
				router.push("/adm/mershow")
			})
			
		}
		
		onMounted(()=>{
			let uid=route.query.uid
			if(uid!=undefined){
				data.a="更改商家"
				$get("/adm/findByUid/"+uid).then((read)=>{
					data.user=read.data.data					
				})
				
				
			}
			
			
		})
		
		
</script>

<style>
</style>
